document.write(`
    <style>
        .pager{
            display: inline-block;
            text-align: center;
            min-width: 20px;
            padding: 5px;
            margin: 5px;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
`);

Vue.component("el-pagination",{
    props :["background","page-size","current-page","layout","total","page-sizes"],
    template : `
            <div>
                <select v-if="pageSizes != undefined"
                    v-model="selectSize" @change="pageSize = selectSize">
                    <option v-for="size in pageSizes" :value="size">每页{{size}}行</option>
                </select>
                <template v-for=" l in layouts ">
                    <span v-if="l=='first'" class="pager" style="background-color: #eee">第一页</span>
                    <span v-if="l=='prev'" class="pager"
                        :style="getStyle(0)"
                        @click="curPage += (curPage==1?0:-1); $emit('page-change',curPage)">上一页</span>
                    <span v-if="l=='pager'" class="pager" v-for=" p in pages"
                        :style="getStyle(p)"
                        @click="curPage = p; $emit('page-change',curPage)">{{p}}</span>
                    <span v-if="l=='next'" class="pager"
                        :style="getStyle(0)"
                        @click="curPage += (curPage==pages?0:1); $emit('page-change',curPage)">下一页</span>
                    <span v-if="l=='last'" class="pager" style="background-color: #eee">最后一页</span>
                </template>
            </div>
        `,
    data(){
        return {
            curPage : 1,
            layouts : [],
            selectSize : 0
        };
    },
    created(){
        this.curPage = parseInt(this.currentPage);
        // 字符串切割数组
        this.layouts = this.layout.split(/\W+/);
        this.selectSize = this.pageSize;
    },
    computed:{
        // 总页数
        pages(){
            let all = this.total / this.pageSize;
            all = Math.floor(all); // 取整
            if(this.total % this.pageSize != 0){
                all ++;
            }
            return all;
        }
    },
    methods:{
        getStyle(p){
            let ret = {backgroundColor : null};
            if(this.background!=undefined){
                ret.backgroundColor = '#eee';
            }
            if(p == this.curPage){
                ret.backgroundColor = '#aaa';
            }
            return ret;
        }
    }
})